
<div class="card-footer py-3 border-0" style="background-color: #f8f9fa;">
    {% if current_user.is_authenticated and moderate == False %}
    <form action="" method="post">
        {{ form.csrf_token }}
        <div class="d-flex flex-start w-100">
        <img class="rounded-circle shadow-1-strong me-3"
            src="https://img2.baidu.com/it/u=1544222954,3828292723&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="avatar" width="40"
            height="40" />
        <div class="form-outline w-100">
            <textarea class="form-control" name="body" id="textAreaExample" rows="4"
            style="background: #fff;"></textarea>
            
            <label class="form-label" for="textAreaExample">Message</label>
        </div>
        </div>
        <div class="float-end mt-2 pt-1">
        <!-- <button type="button" name="submit" class="btn btn-primary btn-sm">Post comment</button> -->
        {{ form.submit(class="btn btn-primary btn-sm", id='submit') }}
        <!-- <button type="button" class="btn btn-outline-primary btn-sm">Cancel</button> -->
        </div>
    </form>
    {% endif %}
</div>
<section class="gradient-custom">
    <div class="container my-5 py-5">
      <div class="row d-flex justify-content-center">
        <div class="col-md-12 col-lg-10 col-xl-8">
          <div class="card">
            <div class="card-body p-4">
              <h4 class="text-center mb-4 pb-2">Nested comments section</h4>
            {% for comment in comments %}
              <div class="row">
                <div class="col">
                  <div class="d-flex flex-start">
                    <img class="rounded-circle shadow-1-strong me-3"
                      src="https://img2.baidu.com/it/u=1544222954,3828292723&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="avatar" width="65"
                      height="65" />
                    <div class="flex-grow-1 flex-shrink-1">
                      <div>
                        <div class="d-flex justify-content-between align-items-center">
                          <p class="mb-1">
                            Maria Smantha <span class="small">- 2 hours ago</span>
                          </p>
                          <a href="#!"><i class="fas fa-reply fa-xs"></i><span class="small"> reply</span></a>
                        </div>
                        <p class="small mb-0">
                          {% if comment.disabled %} 
                          <p></p><i>这个评论已经管理员禁止</i></p> 
                          {% endif %} 
                          {% if moderate or not comment.disabled %} 
                              {% if comment.body_html %} 
                                  {{ comment.body_html | safe }} 
                              {% else %} 
                                  {{ comment.body }} 
                              {% endif %} 
                          {% endif %} 
                          {% if moderate %} 
                            <br> 
                            {% if comment.disabled %} 
                            <a class="btn btn-default btn-xs" href="{{ url_for('.moderate_enable', 
                                id=comment.id, page=page) }}">Enable</a> 
                            {% else %} 
                            <a class="btn btn-danger btn-xs" href="{{ url_for('.moderate_disable', 
                                id=comment.id, page=page) }}">Disable</a> 
                            {% endif %} 
                          {% endif %} 
                        </p>
                      </div>
                    </div>
                  </div>
  

                </div>
              </div>
            {% endfor %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>